<template>
  <div id="chart">
    <div>
      <a-card title="经营概况" :bordered="false">
        <a-row class="header_content">
          <a-col :span="index === 0 ? 4 : 5" v-for="(item, index) in dataInfo.objArray">
            <div>{{ item.title }}</div>
            <div class="color_orange">
              {{ item.today }}
            </div>
            <div>昨日: {{ item.yesterday }}</div>
          </a-col>
        </a-row>
        <a-row class="header_content">
          <a-col :span="index === 0 ? 4 : 5" v-for="(item, index) in dataInfo.objArray2">
            <div>{{ item.title }}</div>
            <div class="color_orange">
              {{ item.today }}
            </div>
            <div>昨日: {{ item.yesterday }}</div>
          </a-col>
        </a-row>
      </a-card>
      <br/>
      <a-card :bordered="false">
        <a-row class="header_content">
          <a-col :span="index === 0 ? 4 : 5" v-for="(item, index) in dataInfo.countArray">
            <div>{{ item.title }}</div>
            <div>{{ item.count }}</div>
          </a-col>
        </a-row>
      </a-card>
    </div>
    <div class="radius title">
      <a-row type="flex" justify="space-between" class="title_head">
        <div class="title_h_left">
          <span :class="titleId == 1? 'active': ''" @click="clickTitle(1)">运营视窗</span>
          <span :class="titleId == 2? 'active': ''" @click="clickTitle(2)">会员分析</span>
          <span :class="titleId == 3? 'active': ''" @click="clickTitle(3)">佣金统计</span>
        </div>
        <div class="title_h_right">
          <a-month-picker v-model="defaultValMonth" placeholder="请选择月份" @change="customDateChoice"/>
        </div>
      </a-row>
      <a-row>
        <div class="title_foot">
          <span class="active" data-id="1" v-if="titleId == 1">核心指标</span>
          <span class="active" data-id="1" v-else-if="titleId == 2">会员分析</span>
          <span class="active" data-id="1" v-else>佣金统计</span>
        </div>
      </a-row>
    </div>
    <a-row :gutter="19" class="rowCard" v-if="titleId == 1">
      <a-col :span="6" class="rowCard_col" v-for="(item, index) in dataInfo.coreArray" >
        <div class="card" :class="index == current?'active': ''" @click="clickCard(index)">
          <p>{{ item.title }}</p>
          <p>{{ item.today }}</p>
          <p v-if="item.yesterdayCompare >= 0">
            较前一日：<span style="color:#f00;">{{ item.yesterdayCompare }}</span><span
            style="font-weight: 600;color:#f00;padding-left:5px;">↑</span>
          </p>
          <p v-if="item.yesterdayCompare < 0">
            较前一日：<span style="color:#090;">{{ Math.abs(item.yesterdayCompare) }}</span><span
            style="font-weight: 600;color:#090;padding-left:5px;">↓</span>
          </p>
          <p v-if="item.lastWeekCompare >= 0">
            较上一周：<span style="color:#f00;">{{ item.lastWeekCompare }}</span><span
            style="font-weight: 600;color:#f00;padding-left:5px;">↑</span>
          </p>
          <p v-if="item.lastWeekCompare < 0">
            较上一周：<span style="color:#090;">{{ Math.abs(item.lastWeekCompare) }}</span><span
            style="font-weight: 600;color:#090;padding-left:5px;">↓</span>
          </p>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="19" class="rowCard"  v-else-if="titleId == 2">
      <a-col :span="6" class="rowCard_col" v-for="(item, index) in dataInfo.coreArray2">
        <div class="card" style="padding-top:15px;">
          <p>{{ item.title }}</p>
          <p>{{ item.today }}</p>
          <p>{{ item.title }}总数：<span style="color:#f00;">{{ item.total }}</span></p>
          <p>昨日新增：<span style="color:#f00;">{{ item.yesterday }}</span></p>
          <p>上周新增：<span style="color:#f00;">{{ item.lastWeek }}</span></p>
          <p>上月新增：<span style="color:#f00;">{{ item.lastMonth }}</span></p>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="19" class="rowCard"  v-else>
      <a-col :span="6" class="rowCard_col" v-for="(item, index) in dataInfo.coreArray3">
        <div class="card">
          <p>{{ item.title }}</p>
          <p>{{ item.today }}</p>
        </div>
      </a-col>
    </a-row>

    <a-row class="radius rowChart"  v-if="titleId == 1">
      <div style="width: 100%;height:100%;">
        <line-chart-multid :fields="fields" :dataSource="statistics"></line-chart-multid>
      </div>
    </a-row>

    <a-row class="radius rowChart" v-else-if="titleId == 2">
      <div style="width: 100%;height:100%;">
        <line-chart-multid-date :fields="fieldsHand" :dataSource="statisticsHand"></line-chart-multid-date>
      </div>
    </a-row>

    <a-row class="radius rowChart" v-else>
      <div style="width: 100%;height:100%;">
        <line-chart-multid-date :fields="fieldsCommission" :dataSource="statisticsCommission"></line-chart-multid-date>
      </div>
    </a-row>


  </div>
</template>

<script>

import {getAction, httpAction} from '@/api/manage'
import LineChartMultid from '@/components/chart/LineChartMultid'
import LineChartMultidDate from '@/components/chart/LineChartMultidDate'

export default {
  name: "首页概况",
  components: {
    LineChartMultid,
    LineChartMultidDate
  },
  data() {
    return {
      loading: true,
      center: null,
      current: 0,
      defaultValMonth: '',
      dataInfo: {},
      statistics: [],
      statisticsArr: [[]],
      fields: ["支付金额"],
      fieldsArr: [['支付金额'], ['客单价'], ['付款订单数']],
      fieldsHand: ["佣金统计"],
      statisticsHand: [],
      fieldsCommission: ["佣金统计"],
      statisticsCommission: [],
      titleId: 1,
      dateType: {total: 0, yesterday: 1, today: 2, week: 3, month: 4, custom: 5},
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    let today = new Date();
    this.defaultValMonth = today.getFullYear() + '-' + (today.getMonth() + 1 < 10 ? '0' + (today.getMonth() + 1) : today.getMonth() + 1);
    this.initLogInfo();
  },
  methods: {
    initLogInfo() {
      this.requestStatistics(this.dateType.custom, this.defaultValMonth);
      this.requestInfo();
    },
    customDateChoice(date, dateString) {
      this.changeDate(this.dateType.custom, dateString);
    },
    changeDate(type, dateString) {
      this.requestStatistics(type, dateString)
    },
    requestStatistics(type, dateString) {
      getAction("/statistics/managementStatistics", {type: type, dayString: dateString}).then(res => {
        if (res.success) {
          this.statistics = res.result.operateData;
          this.statisticsCommission = res.result.commissionData;
          this.fieldsHand = res.result.handFields;
          this.statisticsHand = res.result.handData;
          this.clickCard(0);
        }
      })
    },
    requestInfo() {
      getAction("/statistics/managementInfo", null).then(res => {
        if (res.success) {
          this.dataInfo = res.result
        }
      })
    },
    // 点击卡片
    clickCard(index) {
      this.current = index;
      this.fields = this.fieldsArr[index];
    },
    // 点击一级级菜单
    clickTitle(type) {
      this.titleId = type
    },
  }
}
</script>


<style lang='less'>
.header_content {
  .ant-col {
    div {
      line-height: 40px;

      &:nth-child(1) {
        font-size: 16px;
        font-weight: 600;
        color: #666;
      }

      &:nth-child(2) {
        font-size: 22px;
        font-weight: 600;
      }

      &:nth-child(3) {
        color: #999;
        font-size: 16px;
      }
    }

    .color_orange {
      color: #FF8000;
    }

    .color_red {
      color: #FF4545
    }
  }
}

.radius {
  background: #fff;
  border-radius: 10px;
}

#chart {
  background: #F0F2F5;
  color: #333;
  padding: 15px;

  .header {
    .header_title {
      line-height: 80px;
      border-bottom: 1px solid #F0F2F5;
      font-size: 18px;
      font-weight: 900;
      padding: 0 32px;
    }


    .header_foot {
      padding: 0 32px;
      border-top: 5px solid #F0F2F5;

      .a-col {
        padding: 20px 0;

        div {
          line-height: 40px;
          font-weight: 600;

          &:nth-child(1) {
            font-size: 16px;
            color: #666;
          }

          &:nth-child(2) {
            font-size: 22px;
            color: #63B0FF;
          }
        }
      }
    }
  }

  .title {
    height: 130px;
    margin-top: 22px;

    .title_head {
      padding: 0 32px;
      height: 65px;
      line-height: 65px;
      border: 1px solid #F0F2F5;
      font-size: 18px;
      font-weight: 600;

      .title_h_left {
        span {
          margin-right: 30px;
          height: 100%;
          display: inline-block;
          cursor: pointer;
          user-select: none;
          color: #555;
        }

        .active {
          color: #63B0FF;
          border-bottom: 3px solid #63B0FF;
        }
      }

      .title_h_right {
        em {
          padding: 0 20px;
          font-style: normal
        }

        .el-select {
          width: 140px;
        }
      }
    }

    .title_foot {
      height: 65px;
      line-height: 65px;
      padding: 0 32px;
      font-size: 18px;

      span {
        margin-right: 30px;
        color: #777;
        cursor: pointer;
        user-select: none
      }

      .active {
        color: #333;
        font-weight: 600
      }
    }
  }

  .rowCard {
    margin-top: 22px;

    .rowCard_col {
      height: 230px;

      .card {
        background: #fff;
        box-shadow: 0px 5px 22px 0px rgba(210, 213, 218, 1);
        height: 100%;
        display: flex;
        flex-flow: column;
        align-items: center;
        font-weight: 600;
        padding-top: 40px;
        border-radius: 10px;
        font-size: 16px;
        cursor: pointer;

        p {
          margin: 0;
          line-height: 30px;

          &:nth-child(1) {
            text-align: center;
          }

          &:nth-child(2) {
            text-align: center;
            margin-bottom: 10px;;
          }

          &:nth-child(3) {
            color: #999;
          }

          &:nth-child(4) {
            color: #999;
          }
          &:nth-child(5) {
            color: #999;
          }

          &:nth-child(6) {
            color: #999;
          }
        }

        .a-row {
          width: 100%;
          line-height: 30px;
          color: #999;
          font-size: 14px;
        }
      }

      .active {
        border: 3px solid #63B0FF
      }
    }
  }

  .rowChart {
    height: 260px;
    margin-top: 25px;
  }
}
</style>
